<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/emailList' tag="p">{{$I18n.email}}<span>/</span></router-link>
            <p class="black">{{$I18n.emailInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveEmail" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.emailInfo}}</h3>
      <!-- 邮箱信息 -->
      <EmailInfo :emailData="emailData" :isEdit="isEdit" title="邮箱信息" ref="email"></EmailInfo>
    </section>
    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/emailList')" >{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EmailInfo from '@/components/self/emailInfo'       // 邮箱信息
import INTERFACE from './interface'

export default {
  components: {
    EmailInfo
  },
  data() {
    return {
      emailId: this.$route.query.emailId,
      cancelDialog: false,
      emailData: {},
      isEdit: false
    }
  },
  created() {
    if (!this.emailId) return
    this.isEdit = true
    INTERFACE.queryEmailDetail({emailId: this.emailId}).then(res => {
      this.emailData = res.data
    })
  },
  methods: {
    saveEmail() {
      this.$refs.email.$emit('save')
      window.emailData.emailId = this.emailId;
      INTERFACE.saveEmail(window.emailData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/emailList')
      })
    }
  }
}
</script>